<template>
  <div class="personal-wrap">
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="预约座位" name="seat"></el-tab-pane>
      <el-tab-pane label="预约研讨室" name="seminar"></el-tab-pane>
    </el-tabs>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="libraryName" label="图书馆"> </el-table-column>
        <el-table-column prop="floorName" label="楼层名称"> </el-table-column>
        <el-table-column prop="roomName" :label="activeName == 'seat' ? '阅览室' : '研讨室'">
        </el-table-column>
        <el-table-column label="座位" v-if="activeName == 'seat'">
          <template slot-scope="scope"> {{ scope.row.row }}{{ scope.row.column }} </template>
        </el-table-column>
        <el-table-column prop="orderDate" label="日期" v-if="activeName == 'seat'">
        </el-table-column>
        <el-table-column prop="resDate" label="日期" v-if="activeName == 'seminar'">
        </el-table-column>
        <el-table-column label="开始日期">
          <template slot-scope="scope">
            {{ activeName == 'seat' ? formatDate(scope.row.startTime) : scope.row.orderstart }}
          </template>
        </el-table-column>
        <el-table-column label="结束日期">
          <template slot-scope="scope">
            {{ activeName == 'seat' ? formatDate(scope.row.endTime) : scope.row.orderend }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-if="scope.row.state === 0"
              @click="sign(scope.row)"
              type="primary"
            >
              签到
            </el-button>
            <el-button
              size="mini"
              type="warning"
              v-if="scope.row.state === 1"
              @click="signOut(scope.row)"
            >
              签退
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import request from '@/req'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      activeName: 'seat',
      tableData: [],
    }
  },
  created() {
    this.getReservationByUid()
  },
  methods: {
    tabClick(tab, event) {
      console.log(this.activeName)
      this.tableData = []
      if (this.activeName == 'seat') {
        this.getReservationByUid()
      } else {
        this.getSemReservationByUser()
      }
    },
    async getReservationByUid() {
      const res = await request.post('/user/getReservationByUid', {
        uid: this.$getUser().uid,
      })
      this.tableData = res ? res.rows : []
    },
    async getSemReservationByUser() {
      const res = await request.get(
        `/seminarRes/getReservationByUser?userId=${this.$getUser().uid}`
      )
      this.tableData = res ? res.rows : []
    },
    sign(data) {
      if (this.activeName == 'seat') {
        request
          .post('/user/toSigned', {
            number: '123456',
            rid: data.rid,
          })
          .then((res) => {
            if (res.code === 200) {
              if (res.verify) {
                this.$message({
                  type: 'success',
                  message: '签到成功',
                })
                this.getReservationByUid()
              } else {
                this.$message({
                  type: 'warning',
                  message: '签到码错误',
                })
              }
            } else {
              this.$message.error('时间超时，签到失败')
            }
          })
      } else {
        request
          .post('/seminarRes/sign', {
            id: data.id,
          })
          .then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '签到成功',
              })
              this.getSemReservationByUser()
            } else {
              this.$message({
                type: 'warning',
                message: '签到失败',
              })
            }
          })
      }
    },
    signOut(data) {
      if (this.activeName == 'seat') {
        request
          .post('/user/signOut', {
            // sid: this.item.sid,
            rid: data.rid,
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '签退成功',
              })
              this.getReservationByUid()
            }
          })
      } else {
        request
          .post('/seminarRes/signOut', {
            id: data.id,
          })
          .then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '签退成功',
              })
              this.getSemReservationByUser()
            } else {
              this.$message({
                type: 'warning',
                message: '签退失败',
              })
            }
          })
      }
    },
    formatDate(data) {
      return dayjs(data).format('HH:mm')
    },
  },
}
</script>

<style scoped>
.personal-wrap {
  padding: 0 10px;
}
</style>
